<template>
  <div class="background-div" style="width: 100%;padding-bottom: 100px">
    <div class="main-div">
      <div class="box"
           style="width: 450px;
           height: 550px;
           margin-right: 0;
           background-color: white;
           padding: 20px">
        <h1 style="text-align: center;color: cornflowerblue;margin: 50px 0 10px 0">登录</h1>
        <br>
        <br>
        <el-form label-width="60px">
          <el-form-item label="用户名" style="margin-top:60px;">
            <el-input v-model="user.username" placeholder="请输入用户名" ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="user.password" placeholder="请输入密码" type="password" ></el-input>
          </el-form-item>
          <el-form-item>
            <router-link :to="'/index'" style="text-decoration: none;color: #333">
              <el-button type="primary"
                         style="width: 100px;
                         margin-left:120px;
                         border-radius: 50px"
                         @click="login()">登录——></el-button>
            </router-link>
          </el-form-item>
          <hr>
          <el-form-item>
            <el-link type="primary" style="margin-left: 300px">忘记密码</el-link>
          </el-form-item>
        </el-form>
        </div>
      <div class="box image-box"
           style="width: 490px;
           height: 590px;
           margin-left: 0;
           background-color: white;">
        <span>我爱你家科技有限公司 <br>WWW.hom1ess.com</span>

      </div>
    </div>
  </div>
</template>

<script setup>
  import {ref} from "vue";
  import {ElMessage} from "element-plus";

  const user = ref({username:'',password:''});

  const login = () =>{
    ElMessage.success('登录成功');
  }

</script>

<style scoped>
.background-div {
  margin: 0;
  background-color: #BAD8FF;
  background-size: cover;
  background-position: center;
  text-align: center; /* 水平居中 inline-block 元素 */
}
.main-div {
  display: inline-block;
  margin-top: 100px;
  width: 980px;
  height: 590px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* 设置阴影效果 */
}
.box {
  display: inline-block;
  width: calc(50% - 20px); /* 假设每个盒子占二分之一宽度，减去左右边距 */
  vertical-align: middle; /* 垂直居中 inline-block 元素 */
}
.image-box {
  background-image: url('/public/loginpic.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
}
span {
  display: block;
  color: white;
  margin-top: 450px;
}
</style>